<template>
  <div class="nav-bar">
    <div class="left" @click="clickBack">
      <span class="icon" v-if="isleftArrow">
        <van-icon name="arrow-left" />
      </span>
      <span class="text">{{ leftText }}</span>
    </div>
    <div class="content">
      <div class="title" v-if="title != ''">{{ title }}</div>
      <slot v-else>默认内容 </slot>
    </div>
    <div class="right" v-if="isRightArrow" @click="clickToUser">
      <van-icon name="chat-o" size="20" />
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";
defineProps({
  title: {
    type: String,
    default: "",
  },
  isleftArrow: {
    type: Boolean,
    default: false,
  },
  leftText: {
    type: String,
    default: "",
  },
  isRightArrow: {
    type: Boolean,
    default: false,
  },
});
const router = useRouter();
const clickBack = () => {
  router.go(-1);
};
const clickToUser = () => {
  router.push({
    path: "/profile",
  });
};
</script>

<style lang="less" scoped>
.nav-bar {
  width: 100%;
  height: 46px;
  display: flex;
  line-height: 46px;
  background-color: #fff;
  border-bottom: 1px solid #f2f4f6;
  .left {
    width: 15%;
    padding-left: 20px;
    color: var(--color);
    cursor: pointer;
  }
  .content {
    flex: 1;
    text-align: center;
    font-size: 16px;
  }
  .right {
    text-align: center;
    line-height: 46px;
    width: 10%;
    background-color: #fff;
    color: var(--color);
  }
}
</style>
